<!DOCTYPE html>
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>jQuery Online HTML Editor</title>

<script src="https://gr-blogtools.googlecode.com/svn/js/jquery-1.3.2.obus.js"></script>
<script>
    $(function(){                    
        initHandlers();
        $("#area_1").keyup(htmlHandler);
        $(function() {         
            $().html(
            $()("value"));
        });
    });
       function initHandlers(){
        htmlHandler();
    }
    function htmlHandler(){
        $("#oHEprev").html($("#area_1").val());
    }
</script>
<style>
html,div,body,img,a,h1,h2,h3,h4,ul,li,br,form,input,iframe{padding:0;margin:0;border:none;list-style:none;text-decoration:none;border-radius:none;box-shadow:none;}
body{width:98.8%;overflow-x:hidden;padding:10px 5px;font:normal 90% Times New Roman, Serif;color:#000;}
body,#header-wrap{
background: #a0a7af;
background: -moz-linear-gradient(top, #a0a7af 0%, #28343b 26%, #475a68 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a0a7af), color-stop(26%,#28343b), color-stop(100%,#475a68));
background: -webkit-linear-gradient(top, #a0a7af 0%,#28343b 26%,#475a68 100%);
background: -o-linear-gradient(top, #a0a7af 0%,#28343b 26%,#475a68 100%);
background: -ms-linear-gradient(top, #a0a7af 0%,#28343b 26%,#475a68 100%);
background: linear-gradient(to bottom, #a0a7af 0%,#28343b 26%,#475a68 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a0a7af', endColorstr='#475a68',GradientType=0 );
}
#wrap{width:100%;position:relative;}
#header-wrap{width:100%;height:45px;padding:20px 0 10px 0;border-bottom:9px double #444;border-top:5px double #888;margin:0; }
#header-wrap h1{font:bold 40px Times New Roman;color:orange;margin-left:20px;text-shadow:-1px -1px 0 #ccc,1px 1px 1px #000; }
#header-wrap h1 a{color:green;}
#header-wrap h1 a:hover{color:red;}
#croscoll-wrap{min-height:20px;}
#croscoll-wrap h3{font-size:16px;margin:3px 20px 0 20px;color:#eee;text-shadow:1px 1px 1px #000;}
#sidebar-wrap{width:35%;border:6px solid #555;height:214px;float:right;margin:0;} 
#main-wrap{width;100%;}
#main-wrap{}
input.clik{border-radius:5px;font:normal 12px Arial;letter-spacing:1px;color:#fff;margin:4px 10px -5px 5px !important;padding:1px 5px;background:#000;border:1px solid #666;cursor:pointer;width:80px;text-align:center; }
input.clik:hover{color:#fff;background:#555;box-shadow:2px 2px 2px #000;border-color:#333;}
input.clik:focus{color:red;background:#000;}
textarea.GRoHEdit{width:100%;min-width:100%;max-width:100%;height: 200px;font:normal 12px Verdana, Tahoma, Courier, Monaco, Monospace, Courier New;
line-height:16px;padding:10px 5px 5px 10px;margin:0 !important;border:6px solid #555;background:#000;color:#ccc;}
.GRoHEdit:focus{background:rgba(0,0,0,.3);color:#eee;}
#oHEprev{font-size:13px;font-weight:normal;width: 100%;height: auto;min-height:300px;padding:0px;display:block;margin:10px 0 5px;border:1px solid #555;background:#fff;}
.clear,.clr{clear:both;height:0;}
a,input,textarea{
transition:1s;-o-transition:1s;-ms-transition:1s;-moz-transition:1s;-webkit-transition:1s;
}
</style>

<!--[if lt IE 10]>
<style type="text/css">
.gradient {filter: none;}
input.clik{padding:2px 5px;position:relative;top:-5px;}
#header-wrap h1 a{color:white;}
</style>
<![endif]-->

</head>
<body>
<div id="wrap">
<div id="header-wrap"><h1><a href="http://gubhugreyot.blogspot.com/" target="_blank">Online HTML Editor - with Output Preview</a></div>
<div id="croscoll-wrap"><h3>Edit your code into the box bellow</h3></div>
<div id="main-wrap">
<div style="width:60%;float:left;">
<form>
<textarea class="GRoHEdit" id="area_1">
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kucing Garong</title>

<style type="text/css">
p.meong{
      font-size:50px;
      font-weight:bold;
      color:blue;
      text-shadow:1px 1px red,  -1px 1px red, 1px -1px red, -1px -1px red;
}
p.meong a img{
      border-radius:12px;
      border:6px solid #aaa;
      box-shadow:-1px -1px 0 #000, 4px 4px 4px #000;
      margin:20px;
      vertical-align:middle;
}
h2{
      color:red;
      font:bold 50px Serif;
      margin:5px;
      display:block;
      text-align:center;
      text-shadow:4px 4px 4px #555;
      padding-bottom:4px;
      border-bottom:5px double #222;
}
</style>

</head>
<body>
<h2>Push Meong</h2>
<p class="meong">
<a href="http://gubhugcss.blogspot.com" target="_blank" title="Ciluk....., baaaaa....!!!!!"><img src="https://lh6.googleusercontent.com/-QYGyo4MaOD4/UDAZ-88GC7I/AAAAAAAAAMw/IP-xTZN5NFg/s120/gambar-kucing-300x300.jpg" width="120" height="120" alt="Kucing garong" /></a>
    Kucing Garong
</p> 

</body>
</html> 
</textarea><div class="clr"></div>
<input class="clik" onclick="javascript:this.form.area_1.focus();this.form.area_1.select();" value="Select All" type="button"/><input class="clik" onclick="javascript:this.form.area_1.value='';" value="Clear" type="button"/>
</form>
</div>
<div id="sidebar-wrap"></div>
<div class="clr"></div>
<div id="oHEprev" style="font-size:14px;font-weight:normal;"></div>
</div>
<div id="footer-wrap"></div>
</div>

</body>
</html>












<!--
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Online HTML Editor</title>

<script class="jsbin" src="https://gr-blogtools.googlecode.com/svn/js/jquery-1.3.2.obus.js"></script>
<script>
    $(function(){                    
        initHandlers();
        $("#htmlText").keyup(htmlHandler);
        $(function() {         
            $().html(
            $()("value"));
        });
    });
       function initHandlers(){
        htmlHandler();
    }
    function htmlHandler(){
        $("#oHEprev").html($("#htmlText").val());
    }
</script>
<style>
body{margin:0;padding:0;width:1007px;overflow-x:hidden;}
.GRoHEdit{     
    width: 400px;
    height: 200px;
    font:normal 12px Monaco, Monospace, Courier New, Courier;
    padding:10px 5px 5px 15px; 
    display:block;
    margin:10px 0;
}
#oHEprev{
    width: 99%;
    height: auto;
    padding:0px;
    display:block;
    margin:10px auto;
    border:1px solid #555;
}
</style>
</head>
<body>

<textarea class="GRoHEdit" id="htmlText">
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 canvas demo</title>

<title>Online HTML Editor</title>

<style type="text/css">
</style>

</head>
<body>
<h2>Push Meong</h2>
<p class="meong">
<a href="http://gubhugcss.blogspot.com" target="_blank" title="Ciluk....., baaaaa....!!!!!"><img src="https://lh6.googleusercontent.com/-QYGyo4MaOD4/UDAZ-88GC7I/AAAAAAAAAMw/IP-xTZN5NFg/s120/gambar-kucing-300x300.jpg" width="120" height="120" alt="Kucing garong" /></a>
    Kucing Garong
</p>

</body>
</html>
</textarea>

<div class="entry" id="oHEprev"></div>

</body>
</html>
-->


<!--

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Online HTML Editor</title>

<script class="jsbin" src="https://gr-blogtools.googlecode.com/svn/js/jquery-1.3.2.obus.js"></script>

<style>

/* SANDBOX http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js jQuery-1.3.2_obus.js jQuery-1.8.1.min.js */
body{margin:0;padding:0;width:1007px;overflow-x:hidden;}
.sandboxTextInput{     
    width: 675px;
    height: 200px;
    font:normal 12px Monaco, Monospace, Courier New, Courier;
    padding:10px 5px 5px 15px; 
    display:block;
    margin:10px auto;
}
#sandboxOutput{
    width: 99%;
    height: auto;
    padding:0px;
    display:block;
    margin:10px auto;
    border:1px solid #555;
}
</style>
</head>
<body>

<script>
    $(function(){        
        var previousTimestamp = 0;                
        initHandlers();
        $("#htmlText").keyup(htmlHandler);
	javascriptHandler();
        $(function() {         
            $().html(
            $()("value"));
        });
    });
       function initHandlers(){
        htmlHandler();
    }
    function htmlHandler(){
        $("#sandboxOutput").html($("#htmlText").val());
    }
</script>



<div id="mainwrap">
<div id="contentwrap">
        <div class="post" id="post-7">

    <h2>Enter code, and watch it appear in the live preview below!</h2>
    <p>HTML<br />
<textarea class="sandboxTextInput" id="htmlText">
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 canvas demo</title>

<title>Online HTML Editor</title>

<style type="text/css">
.meong{
    padding:10px;
    background:lightblue;
    margin:10px 0;
    font-size:40px;
    letter-spacing:-1px;
}
.meong img{
    vertical-align:middle;
    margin-right:20px;
}
p {
    font: bold 22px Times New Roman, Serif;
    color: teal;
    text-shadow:1px 1px 1px #000;   /* iframe */ 
}
</style>

</head>
<body>

<p class="meong">
<a href="http://gubhugcss.blogspot.com" target="_blank" title="Ciluk....., baaaaa....!!!!!"><img src="https://lh6.googleusercontent.com/-QYGyo4MaOD4/UDAZ-88GC7I/AAAAAAAAAMw/IP-xTZN5NFg/s120/gambar-kucing-300x300.jpg" width="120" height="120" alt="Kucing garong" /></a>
    Kucing Garong
</p>


<p>Canvas pane goes here:</p>
    <canvas id="pane" width="300" height="200"></canvas>
    
<script type="text/javascript">
    var canvas = document.getElementById('pane');
    var context = canvas.getContext('2d');
    
    context.fillStyle = 'rgb(250,0,0)';
    context.fillRect(10, 10, 55, 50);

    context.fillStyle = 'rgba(0, 0, 250, 0.5)';
    context.fillRect(30, 30, 55, 50);
</script>

</body>
</html>
</textarea></p>

    

    </div>
    <div class="post-shadow"></div>
    
    <div class="post">
    <h2 class="title"><a href="#" rel="bookmark" title="Sandbox Live Output">Live Preview</a></h2>
        <div class="entry" id="sandboxOutput">
            
        </div>
    </div>

    
    </div>

</div>
<div class="clearfix"></div>

</body>
</html>
-->